So in the last part, we made our epically animated hover animations here for our buttons and now it's
time to start programming them.
So we're going to start out in this video by programming our quick button to make it so that when we
present, the game fades out and closes.
So we're just going to hop in and just start working on that in.
The first thing that we need is to create a feed transition.
So it's going to be a brand new widget with a fully black image that stretches across the whole screen.
And it'll just make it so that we can feed into black before we close the game.
And we're also going to use this widget later on when we program our play button.
You know, we're going to fade into black.
And then we'll change the level just to give a nice professional transition between our main menu and
our actual game.
So let's start out here by creating that feed widget.
We're going to hop into our main menu folder, right click go to the user interface and the widget blueprint.
And I'm just going to call this fate something simple like that.
Can I open this up and add a new image to this?
It's going to drag this in.
I'm just going to scale this up to fit our screen size and I'm going to anchor it to the entire edge
of the canvas panel.
So if you see a face like this and I resize the image, we'll just scale to be as large or larger than
the screen size no matter what.
So no matter what, this will cover the whole screen.
That's exactly what we want next.
I'm going to grab the tint and I'm going to make it black.
And then there's one other thing here, a setting that I want to adjust.
And if we scroll down to behavior, we've got this option called visibility.
Now, this setting is going to be a little bit misleading.
But as you can see, we have by default, you know, it's set to visible like we can see it.
It's right here.
Obviously, we can set it to collapsed.
We can set it to hidden.
And then we've got these other two settings as well, which is not hit testable self and all children
and not hit testable self only.
And so the way this works is in widget blueprint's, it's possible to block a hit event.
So let's say in our menu buttons blueprint here I've got my place settings buttons.
Right if I put an image.
In front of these.
We would not be able to register events because this image is on top of them, it's blocking the mouse
from getting to these buttons.
So if I was to play right now, you could see, well, I guess you can't really see this in effect.
If I was to put this on this half of the buttons here, when I hover down here, you could see it's
not playing the hover animations for any of these.
If I go to the other side, though, where this image is not blocking, then you can see the buttons
do register.
So this is because, you know, by default, an image is it's visible and it is hit testable.
So that's what it means when something is going to block your click or block your hit event, it's a
hit testable so.
If I go into I guess I'll just continue with the example in here, since we've got buttons to work with,
if I have this detestable image, but I want to be able to interact with buttons and stuff through this
image, what I need to do is I need to go down to the behavior tab, to the visibility and switch this
to not hit testable self only or self and all children.
I'll just use self only for this example and explain the other part in just a moment.
So now if I go in here now, when I hover down, I'm hovering through this image because it is not testable.
It's basically the equivalent of a no collision object, a static mesh that doesn't have collision in
3D space.
So that's something very important when it comes to layering stuff on top of your buttons.
If you're ever having trouble, you know, like you've got some kind of cool shading effects across
your buttons or something.
And you're like, why the heck aren't my buttons working then?
It's probably because you have hit testable images or buttons or text or something on top of other stuff.
So that's something to keep in mind.
And since our feed widget here is using a big old giant image.
In some cases, we might not want, you know, something like this to block our clicks, so I figured
this would just be a good time to bring this up.
Obviously, in this example here with the feed widget, in the scenario that we're using this, it isn't
exactly necessary.
But I just figured this would be a good time to bring up this aspect of widget blueprints.
So with our image, here are just our black feed image.
We're going to go to our visibility, go to the visible setting, and we're just going to say that you're
not hit Dunstable self only.
And just real quickly, the self and all children option.
This is if you have, let's say, a canvas panel, a canvas panel can basically house as many of any
kind of widget object as you want.
You can put a ton of images inside of it.
You can put a bunch of buttons inside of it.
So it's kind of like a just a parent group folder, basically for a bunch of widget objects.
So let's say I had a bunch of images in my widget blueprint.
I might want all of them to be not testable.
So rather than going through a hundred different objects in my canvas panel and specifying all of them
to be not adjustable, I can just grab the canvas panel, go to the visibility or the.
Yeah, the visibility of the behavior here.
And I can just say not had testable self and all children.
So by default itself only, which is probably what you'll want most of the time, but, hey, it's good
to know about now, you know about it and now we can keep going with the rest of this.
So with that lesson out of the way, let's grab our background image, create a new animation.
I'm just going to call this feed in.
And I'm going to select this animation with my image selected, I'm going to add it to the track, I'm
going to track its color and opacity, and I'm just going to set color opacity from one key frame for
that or sorry, all go from zero to one.
So I'll go from zero to keyframe and then I'll go to zero point five seconds here on the timeline and
set this to one.
So now we've got our nice little feet in here just like that.
And we're.
I'll just compile this and save this and we can hop back into our menu buttons, which in here, so
since we're going to be programming our quit button, let's just select this here and scroll down to
events and we're going to add an on click event.
So when we click on this button, we're going to fire off this code.
We're going to create our new widget.
It's going to be our fate here.
So just grab that, we're going to go add to viewport, just like we've done before.
But now, since we've got a reference to our feed widget, we can access basically any variable and
setting inside of it so we can now play our feed animation.
So what we do is we can just go over here and say get feed, right.
So this is going to get that animation variable like we have in here.
You know, in our graph for our feed widget, we got this variable which we are accessing and now we
can play this animation.
And so this is the animation we obviously need to target which widget we are playing this animation
in, so that's going to be the the reference to our feed widgets or just going to plug that in here.
And we were going to just play this as default here, speed mode forward.
That's all good.
So just save this.
And then after this, we're just going to have a delay of five seconds since that is the length it takes
for this animation to complete.
And then we're just going to grab a quick game note and we'll just keep the quick reference at quitte.
You could set into a background process, but I don't see why you would want to do that.
So just keep this that quick right here.
Save this.
And when we play if we go down to our quick button and we click this it please our fadeout animation
and the game automatically closes.
So that is fantastic.
That is awesome.
And in the next part, we are going to get into programming the play button so that when we hit it,
we will actually load into a level that we can specify.
So.
That is it for this part, and I will see you in the next.